<template>
  <div class="terms-container">
    <van-nav-bar
      title="用户协议"
      left-arrow
      @click-left="router.back()"
      :border="false"
      class="custom-nav"
    />
    <div class="content">
      <div class="header">
        <div class="app-title">
          <h1>新学校</h1>
        </div>
        <h2>用户协议</h2>
        <p class="update-time">更新时间：2024年1月1日</p>
      </div>
      <div class="terms-content">
        <p class="welcome">欢迎使用我们的服务！</p>
        <section>
          <div class="section-header">
            <van-icon name="description" size="20" />
            <h3>1. 服务条款</h3>
          </div>
          <p>通过访问或使用本服务，您同意受本协议的约束。如果您不同意本协议的任何部分，您可能无法使用该服务。</p>
        </section>
        <section>
          <div class="section-header">
            <van-icon name="user-o" size="20" />
            <h3>2. 用户账户</h3>
          </div>
          <p>您需要创建一个账户才能使用某些服务功能。您有责任维护您的账户信息的准确性。</p>
          <ul class="bullet-list">
            <li>请使用真实有效的信息注册账户</li>
            <li>妥善保管您的账户信息和登录密码</li>
            <li>定期更新和维护您的账户信息</li>
          </ul>
        </section>
        <section>
          <div class="section-header">
            <van-icon name="shield-o" size="20" />
            <h3>3. 内容和行为规则</h3>
          </div>
          <p>您同意不会使用该服务进行任何非法或未经授权的目的。</p>
          <div class="notice-box">
            <van-icon name="info-o" />
            <p>请遵守相关法律法规和平台规则，维护良好的学习环境。</p>
          </div>
        </section>
        <section>
          <div class="section-header">
            <van-icon name="certificate" size="20" />
            <h3>4. 知识产权</h3>
          </div>
          <p>该服务及其原始内容、功能和设计受知识产权法保护。</p>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
</script>

<style lang="scss" scoped>
.terms-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  
  .custom-nav {
    background: transparent;
    
    :deep(.van-nav-bar__title) {
      color: #333;
      font-weight: 600;
    }
    
    :deep(.van-icon) {
      color: #333;
    }
  }
  
  .content {
    padding: 16px;
    
    .header {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 32px;
      padding: 24px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
      
      .app-title {
        margin-bottom: 16px;
        
        h1 {
          font-size: 24px;
          font-weight: 600;
          color: #333;
        }
      }
      
      h2 {
        margin: 16px 0 8px;
        font-size: 24px;
        font-weight: 600;
        color: #333;
      }
      
      .update-time {
        font-size: 14px;
        color: #999;
      }
    }
    
    .terms-content {
      padding: 24px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
      
      .welcome {
        text-align: center;
        font-size: 16px;
        color: #666;
        margin-bottom: 32px;
      }
      
      section {
        margin-bottom: 32px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .section-header {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          
          .van-icon {
            margin-right: 8px;
            color: var(--van-primary-color);
          }
          
          h3 {
            font-size: 18px;
            font-weight: 600;
            color: #333;
          }
        }
        
        p {
          line-height: 1.8;
          color: #666;
          margin-bottom: 16px;
        }
        
        .bullet-list {
          margin: 16px 0;
          padding-left: 20px;
          
          li {
            color: #666;
            line-height: 1.8;
            margin-bottom: 8px;
            
            &::marker {
              color: var(--van-primary-color);
            }
          }
        }
        
        .notice-box {
          display: flex;
          align-items: flex-start;
          padding: 12px 16px;
          background: var(--van-primary-color-light);
          border-radius: 8px;
          margin-top: 16px;
          
          .van-icon {
            margin-right: 8px;
            margin-top: 2px;
            color: var(--van-primary-color);
          }
          
          p {
            margin: 0;
            font-size: 14px;
            color: var(--van-primary-color-dark);
          }
        }
      }
    }
  }
}
</style>
